<!--
 * @Author: Jeecg
 * @Description: logo component
-->
<template>
  <div class="anticon" :class="getAppLogoClass" @click="goHome">
    <!-- <img src="../../../assets/images/logo.png" /> -->
    <div class="w-full truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
      <!-- {{ title }} -->
      <div v-if="departmentName" class="department-name">
        {{ departmentName }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref, ref, onMounted } from 'vue';
  // import { useGlobSetting } from '/@/hooks/setting';
  import { useGo } from '/@/hooks/web/usePage';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { PageEnum } from '/@/enums/pageEnum';
  import { useUserStore } from '/@/store/modules/user';
  import { getUserDeparts } from '/@/views/system/depart/depart.api';

  const props = defineProps({
    /**
     * The theme of the current parent component
     */
    theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
    /**
     * Whether to show title
     */
    showTitle: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },
  });

  const { prefixCls } = useDesign('app-logo');
  const { getCollapsedShowTitle } = useMenuSetting();
  const userStore = useUserStore();
  // const { title } = useGlobSetting();
  const go = useGo();

  // 部门名称
  const departmentName = ref('');

  // 获取部门名称
  async function getDepartmentName() {
    try {
      // 首先尝试从登录信息中获取部门信息
      const loginInfo = userStore.getLoginInfo;
      if (loginInfo && loginInfo.departs && Array.isArray(loginInfo.departs) && loginInfo.departs.length > 0) {
        // 如果有多个部门，显示第一个部门名称
        const departsArray = loginInfo.departs as any[];
        const firstDepart = departsArray[0];
        departmentName.value = firstDepart?.departName || '';
        return;
      }

      // 如果登录信息中没有部门信息，通过API获取
      const result = await getUserDeparts();
      if (result && result.list && result.list.length > 0) {
        // 查找当前用户所属的部门
        const userInfo = userStore.getUserInfo;
        const currentDepart = result.list.find((item) => item.orgCode === userInfo.orgCode);
        if (currentDepart) {
          departmentName.value = currentDepart.departName || '';
        } else {
          // 如果没找到匹配的，使用第一个部门
          departmentName.value = result.list[0].departName || '';
        }
      }
    } catch (error) {
      console.warn('获取部门信息失败:', error);
    }
  }

  // 组件挂载时获取部门名称
  onMounted(() => {
    getDepartmentName();
  });

  const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }]);

  const getTitleClass = computed(() => [
    `${prefixCls}__title`,
    {
      'xs:opacity-0': !props.alwaysShowTitle,
    },
  ]);

  function goHome() {
    go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-app-logo';

  .@{prefix-cls} {
    display: flex;
    align-items: center;
    padding-left: 7px;
    cursor: pointer;
    transition: all 0.2s ease;

    //左侧菜单模式和左侧菜单混合模式加渐变背景色
    &.jeecg-layout-mix-sider-logo,
    &.jeecg-layout-menu-logo {
      background: @sider-logo-bg-color;
    }

    // &.light {
    //   border-bottom: 1px solid @border-color-base;
    // }

    &.collapsed-show-title {
      padding-left: 20px;
    }

    &.light &__title {
      color: @primary-color;
    }

    &.dark &__title {
      color: @white;
    }

    &__title {
      font-size: 16px;
      font-weight: 700;
      transition: all 0.5s;
      line-height: normal;

      .department-name {
        font-size: 16px;
        font-weight: 700;
        opacity: 1;
        margin-top: 0;
        line-height: normal;
      }
    }
  }
</style>
